<template>
    <div class="form-group">
        <label>
            <span :class="labelClass">{{label}}</span>
            <textarea class="form-control" :required="required" v-model="data" :placeholder="pl" :name="name"
                      :disabled="disabled" :class="inputClass"></textarea>
        </label>
        <slot/>
    </div>
</template>

<script>
    export default {
        name: 'input-text-area',
        data () {
            return {
                data: this.value
            };
        },
        props: {
            label: {type: String},
            required: {type: String},
            value: {type: String | Number},
            name: {type: String},
            pl: {type: String},
            disabled: {type: Boolean},
            inputClass: {type: String},
            labelClass: {type: String}
        },
        watch: {
            value (newVal) {
                this.data = newVal;
            },
            data (newVal) {
                this.$emit('input', newVal);
            }
        }
    };
</script>

<style scoped>
    .form-group label {
        display: block;
    }
</style>
